<template>
  <el-container>
    <el-main class="main-bg">
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <el-row>
          <el-col v-if="userInfo.role === '1'" :span="8">
            <el-form-item label="部门名称">
              <el-select v-model="searchForm.unitName" placeholder="请选择">
                <el-option v-for="item in unitList" :key="item.unitName" :label="item.unitName" :value="item.unitName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="金额">
              <el-input v-model="searchForm.totalAmount" placeholder="请输入金额" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类别">
              <el-select v-model="searchForm.sortName" placeholder="请选择">
                <el-option v-for="item in sortList" :key="item.sortName" :label="item.sortName" :value="item.sortName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input v-model="searchForm.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期">
              <el-date-picker
                v-model="createdTime"
                end-placeholder="结束日期"
                placeholder="选择日期"
                range-separator="至"
                start-placeholder="开始日期"
                style="width: 100%"
                type="daterange"
                value-format="yyyy-MM-dd"
                @change="onChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="userInfo.role === '1' ? 8 : 16" class="text-right">
            <el-button icon="iconfont iconxianxing_sousuo" type="primary" @click="handleSearch">
              查询
            </el-button>
            <el-button icon="iconfont iconxianxing_zhongzhi" @click="handleReset">
              重置
            </el-button>
          </el-col>
          <el-col :span="24" class="text-left">
            <el-button type="primary" @click="onAddOutBound">
              新增出库单
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table
        ref="table"
        :current-page="page"
        :header-data="tableHeader"
        :index="false"
        :loading="loading"
        :page-size="limit"
        :table-data="tableData"
        :total="total"
        class="data-table"
        style="width: 100%"
        @now-page="handlePage"
        @now-size="handleSize"
        @table-sort="handleSort"
      />
    </el-main>
  </el-container>
</template>

<script>
import addTable from "@/mixins/addtable";
import { getOutBoundList, postOutBoundDelete } from "./api";
import { parseTime } from "@/utils";
import { getSortList, getUnitList } from "@/views/inBound/api";
import { mapGetters } from "vuex";

export default {
  name: "Inbound",
  mixins: [addTable],
  data () {
    return {
      createdTime: null,
      searchForm: {
        unitName: "",
        sortName: "",
        totalAmount: "",
        createdTime: [],
      },
      title: "",
      type: "look",
      sortList: [],
      unitList: [],
      tableHeader: [],
      personOptions: [],
      oneLoading: false,
      form: {
        sortId: "",
        sortName: "",
        sortType: "",
        remark: "",
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  async created () {
    this.tableHeader = [
      {
        prop: "unitName",
        label: "部门名称",
        sortable: false,
        overflow: true,
      },
      {
        prop: "dateTime",
        label: "日期",
        sortable: false,
        overflow: true,
        align: "left",
        render: (h, vm) => {
          const time = parseTime(vm.dateTime, "{y}-{m}-{d}");
          return <span>{time}</span>;
        },
      },
      {
        prop: "sortName",
        label: "类别",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "number",
        label: "编号",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "totalAmount",
        label: "合计金额",
        sortable: false,
        overflow: true,
        align: "left",
        render: (h, vm) => {
          return <span>{vm.totalAmount}元</span>;
        },
      },
      // {
      //   prop: 'manager',
      //   label: '主管',
      //   sortable: false,
      //   overflow: true,
      //   align: 'left'
      // },
      {
        prop: "warehouse",
        label: "仓库",
        sortable: false,
        overflow: true,
        align: "left",
      },
      // {
      //   prop: 'accountName',
      //   label: '记账',
      //   sortable: false,
      //   overflow: true,
      //   align: 'left'
      // },
      // {
      //   prop: 'handledName',
      //   label: '经手人',
      //   sortable: false,
      //   overflow: true,
      //   align: 'left'
      // },
      {
        prop: "createdTime",
        label: "创建时间",
        sortable: false,
        overflow: true,
        align: "left",
        width: 180,
        render: (h, vm) => {
          const time = parseTime(vm.createdTime);
          return <span>{time}</span>;
        },
      },
      {
        prop: "remark",
        label: "备注",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        width: 180,
        label: "操作",
        align: "left",
        fixed: "right",
        buttonList: (row, index) => {
          return this.userInfo.userName === 'admin'
           ? [
            {
              text: "预览打印",
              type: "text",
              event: this.onDetail,
            },
            {
              text: "编辑",
              type: "text",
              event: this.onEdit,
            },
            {
              text: "删除",
              type: "text",
              event: this.onDelete,
            },
          ] : [
            {
              text: "预览打印",
              type: "text",
              event: this.onDetail,
            },
            {
              text: "编辑",
              type: "text",
              event: this.onEdit,
            }
          ]
        },
      },
    ];
    this.getTableData();
    await this.getInitData();
  },

  methods: {
    onChange (date) {
      if (date) {
        const dateMin = date[0] + " 00:00:00";
        const dateMax = date[1] + " 23:59:59";
        const timestampMin = new Date(dateMin).getTime();
        const timestampMax = new Date(dateMax).getTime();
        this.searchForm.createdTime = [timestampMin, timestampMax];
      }
    },
    onEdit (row) {
      this.$router.push({
        name: "outBoundAdd",
        query: {
          id: row.id,
        },
      });
    },
    async getInitData () {
      const { data } = await getUnitList({
        page: 1,
        limit: 1000,
      });
      this.unitList = data;
      const res = await getSortList({
        page: 1,
        limit: 1000,
        sortType: "1", // 类型
      });
      this.sortList = res.data;
    },
    onAddOutBound () {
      this.$router.push("outBoundAdd");
    },
    onDetail (row) {
      this.$router.push({
        name: "outBoundView",
        query: {
          id: row.id,
        },
      });
    },
    onDelete (row) {
      this.$confirm("您确认要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        postOutBoundDelete({ id: row.id })
          .then(({ success, message }) => {
            if (success) {
              this.$message.success(message);
            } else {
              this.$message.error(message);
            }
            this.getTableData();
          })
          .catch();
      });
    },
    getTableData () {
      this.loading = true;
      this.getTableParams();
      getOutBoundList(this.tableParams)
        .then((res) => {
          if (!res) return;
          const { data, pageInfo } = res;
          setTimeout(() => {
            this.loading = false;
            this.tableData = data;
            this.total = pageInfo.total;
          }, 500);
        })
        .catch((err) => {
          console.log("TCL: getTableData -> err", err);
        });
    },
    handleReset () {
      this.createdTime = "";
      this.searchForm = {};
      this.getTableData();
    },
  },
};
</script>
